<template>
  <div class="padding-20">
    <sunForm :model="formData" ref="form" :show-error-message="true">
      <sunFormItem label="姓名" :rule="validateName" trigger="blur" prop="name">
        <sunInput v-model="formData.name"></sunInput>
      </sunFormItem>
      <sunFormItem label="性别" :rule="validateSex" trigger="blur" prop="sex">
        <sunInput v-model="formData.sex"></sunInput>
      </sunFormItem>
      <sunFormItem label="地址" :rule="validateAddr" trigger="blur" prop="addr">
        <sunInput v-model="formData.addr"></sunInput>
      </sunFormItem>
      <sunFormItem label="学号" :rule="validateNumber" trigger="input" prop="number">
        <sunInput v-model="formData.number"></sunInput>
      </sunFormItem>
    </sunForm>
    <button class="margin-top-20" @click="handleValidateForm">校验</button>
  </div>
</template>

<script>
import sunForm from "@/components/sun-form";
import sunFormItem from "@/components/sun-form-item";
import sunInput from "@/components/sun-input";

export default {
  components: { sunForm, sunFormItem, sunInput },
  data() {
    return {
      formData: {
        name: 1234,
        sex: 1234,
        addr: 1234,
        number: 1234
      }
    };
  },
  methods: {
    async handleValidateForm() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        // 返回的异常信息数组
        console.log(error);
      }
    },
    validateName(val) {
      console.log("校验方法-->" + val);
      if (val == "1234") {
        throw new Error("姓名异常提醒");
      }
    },
    validateSex(val) {
      console.log("校验方法-->" + val);
      if (val == "1234") {
        throw new Error("性别异常提醒");
      }
    },
    validateAddr(val) {
      console.log("校验方法-->" + val);
      if (val == "1234") {
        throw new Error("地址异常提醒");
      }
    },
    validateNumber(val) {
      console.log("校验方法-->" + val);
      if (val == "1234") {
        throw new Error("学号异常提醒");
      }
    }
  }
};
</script>